/**
 * Created by 12613 on 2016/8/13.
 */
function TagBox(selector,config){
    <!--标签添加搜索下拉菜单-->
    var initHtml = '<div id="tags-dropdown" class="dropdown" style="display: none">\n<input class="jf-input" id="tag-input">\n' +
        '<ul id="tags-dropdown-menu" class="dropdown-menu" role="menu" aria-labelledby="tag-input">\n</ul></div>\n' +
        '<a id="add-tag" data-toggle="modal"  class="jf-add-tag" data-target="#myModal" href="javascript:0;">' +
        '<span class="glyphicon glyphicon-plus" aria-hidden="true">&nbsp;</span>添加标签</a>';
    $(selector).html(initHtml);
}


//标签添加相关逻辑

$("#add-tag").click(function(event){
    $("#add-tag").hide();
    $("#tags-dropdown").css("display","inline-block");
    $("#tag-input").val("");
    $("#tag-input").focus();
    //防止事件冒泡
    event.stopPropagation();
});

function Tag(id,name){
    this.name = name;
    this.id = id;
}

//给输入框注册点击事件处理，防止事件冒泡
$('#tag-input').click(function(event){
    // donothing
    //防止在点击tag-input时触发点击docment事件
    event.stopPropagation();
});
//输入时联想
$('#tag-input').bind('input propertychange',
    function() {
        $("#tags-dropdown").addClass("open");//显示下拉列表

        //todo 获取数据，这个数据会在文档加载时添加到网页中。
        var tagList = [
            {id:1,name:"spring"},
            {id:2,name:"java"},
            {id:3,name:"数据库"},
            {id:4,name:"slf4j"},
            {id:4,name:"IOS"},
            {id:4,name:"安卓"}
        ];

        //与输入匹配的标签
        var nameKey = $('#tag-input').val();
        var matchedTagList = searchMatchedTags(tagList,nameKey);

        freshTheTagsDropdown(matchedTagList);
    }
);

//点击空白处隐藏弹出菜单
$(document).click(showAddTagThenHideTagInput);

function removeTagEventBind(){
    $(".jf-tag-remove").click(function(event){
        var a = this;
        $(this.parentElement).hide();
        event.stopPropagation();
    });
}
removeTagEventBind();


//隐藏tag输入框，显示【+ 添加标签】
function showAddTagThenHideTagInput(){
    $("#tags-dropdown").hide();
    var addTagObj =  $("#add-tag");
    addTagObj.show();
    //清除下拉菜单内容
    clearTagsDropdown();
}
function clearTagsDropdown(){
    $("#tags-dropdown-menu").html("");
    $("#tags-dropdown").removeClass("open");
}

function freshTheTagsDropdown(tagList){
    if(tagList == null || tagList == undefined){
        return;
    }
    if(tagList.length > 0){
        //添加元素到菜单栏
        var tagListHtml = "";
        for(var i = 0 ;i < tagList.length;i++){
            // html:<li role="presentation"><a role="menuitem"  tabindex="-1" href="#">数据挖掘</a></li>
            var html = '<li data-id="'+tagList[i].id+'" role="presentation"><a role="menuitem"  tabindex="-1" href="#">'+tagList[i].name+'</a></li>';
            tagListHtml = tagListHtml + "\n" + html;
        }
        $("#tags-dropdown-menu").html(tagListHtml);
    } else {
        //添加 【创建新的标签】
        // html: <li role="presentation"><a role="menuitem" class="jf-add-tag" tabindex="-1" href="#"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true">&nbsp;</span>添加标签</a></li>
        var html = '<li id="jf-create-tag-li" role="presentation"><a role="menuitem" id="jf-create-tag" class="jf-add-tag" tabindex="-1" href="javascript:0;">' +
            '<span class="glyphicon glyphicon-send" aria-hidden="true">&nbsp;</span>新的标签</a></li>';
        $("#tags-dropdown-menu").html(html);
        //单击【+ 新的标签】则创建新的标签
        $("#jf-create-tag-li").click(createNewTag);

    }
}
// todo 通过名字搜索tagList
function searchMatchedTags(tagList, nameKey) {
    //return [{id:4,name:"安卓"}];
    return [];
}


function createNewTag(){
    //去tag-inpt的值作为name
    var tagName = $('#tag-input').val();
    // todo post到服务器
    alert("保存tag["+tagName+"]成功");
    var tag = new Tag(1,tagName);
    //添加到选择标签box中
    addOneTagInJFTagBox(tag);
    //将新的tag保存到本地内存
    putOneTagOnLocal(tag)
}
//将tag保存到内存tagList中
function putOneTagOnLocal(tag){
    //
}
//将tag保存到TagBox中
function addOneTagInJFTagBox(tag){
    //html:<span class="jf-tag">spring mvc<a href="#" class="jf-tag-remove">×</a></span>
    var html = '\n <span class="jf-tag" tag-id="'+tag.id+'">'+tag.name+'<a href="javascript:0;" class="jf-tag-remove">×</a></span>';
    $("#tags-dropdown").before(html);
    //绑定删除事件
    removeTagEventBind();
}

